<template>
  <div class="login">
    <div class="title">用户登陆</div>
    <div class="block">
        <input type="text" v-model="phone" placeholder="输入账号">
    </div>
    <div class="block">
        <input type="text" v-model="pass" placeholder="输入密码">
    </div>
    <div class="block">
        <!-- <input type="button" @click="login" value="立即登陆"> -->
        <van-button @click="login" type="primary" round>立即登陆</van-button>
    </div>
  </div>
</template>

<script>
import { user_login } from '../utils/api'

export default {
    data(){
        return {
            phone:'',
            pass:''
        }
    },
    methods:{
        login(){
            this.$toast({message:'res.data.msg',type:'success', duration:0})
            //发请求
            user_login( {phone:this.phone,pass:this.pass} ).then((res)=>{
                console.log(res.data);
                if( res.data.code == 200 ){ //登陆成功
                    //保存token到localStorage
                    localStorage.setItem('token', res.data.token );
                    //保存用户信息
                    localStorage.setItem("userinfo", JSON.stringify(res.data.userinfo) )
                    //跳转到 首页
                    this.$router.push('/home');
                    //this.$router 是 路由管理对象 , 专门负责跳路由
                    //在任何一个组件中 都可以通过当前组件实例 拿到路由管理对象 $router
                }
            })

        }
    }
}
</script>

<style lang="scss">
.login{
    .title{
        padding: 60px 0;
        text-align: center;
    }
    .block{
        margin: 0 20px;
        margin-bottom: 20px;
        input{
            width: 100%;
            height: 40px;
            padding-left: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 20px;
        }
    }
}
</style>